<template>
	<view class="page-appoint">
		<view class="atv">
			<view class="atvsv">
				<view :class="{atc:currentTab==1}" @click="currentTabs(1)">正在预约</view>
			</view>
			<view class="atvsv">
				<view :class="{atc:currentTab==2}" @click="currentTabs(2)">超时预约</view>
			</view>
		</view>
		<view v-show="currentTab==1" style="margin-top: 5px;margin-bottom: 10px;overflow: hidden;">
			<view class="itevs1" style="color: #ffffff;" @click="editcp">更换车牌</view>
			<view class="itevs1" style="background-color: red;color: #ffffff;border: 1px solid #ffffff;" @click="qxrwsj">取消任务</view>
			<view class="itevs1" style="color: #ffffff;" @click="getcode">查看二维码</view>
		</view>
		<view class="appoint-item" v-for="item in list" :key="item.id" :class="{'itvs':cur1==item.id}"
			@click="addxz(item)">
			<view>
				<view style="font-size: 18px;" v-show="item.datetime==1">预约时间:早班</view>
				<view style="font-size: 18px;" v-show="item.datetime==2">预约时间:中班</view>
				<view style="font-size: 18px;" v-show="item.datetime==3">预约时间:晚班</view>
			</view>
			<view>委托单号：{{item.hzdata.orderons}}</view>
			<view>保税区授权:{{item.hzdata.swg==1?'授权':'未授权'}}</view>
			<view>车牌：{{item.cp}}</view>
			<view>车队：{{item.cdlist.cdname}}</view>
			<view>货&#12288;&#12288;名：{{item.hname}}</view>
			<view>船&#12288;&#12288;名：{{item.shipnam}}</view>
			<view>航&#12288;&#12288;次：{{item.hc}}</view>
			<view>时间：{{item.times}}</view>
			<view>货主：{{item.hzdata.hzdwid}}</view>
			<view>班次：{{item.banci==1?'早班':item.banci==2?'中班':item.banci==3?'晚班':'异常'}}</view>
			<view v-show="item.status==1">任务状态：正在运行</view>
			<view v-show="item.status==2">任务状态：已完成</view>
			<view v-show="item.status==3">任务状态：超时取消</view>
		</view>

		<view class="appoint-item" v-show="list.length==0">
			<view>暂无预约数据</view>
		</view>
		<tabBar :pagePath="'/pages/shoquan/sjckyuylist'"></tabBar>
		
		
		<!-- <view class="ck" v-show="codetypes">
			<view class="qx">
				<view class="qxtext">二维码</view>
			</view>
			<view style="height: 360px;">
				<u--image  style="width: 225px;margin-top: 20px;height: 300px;" :src="codeimg" ></u--image>
				<image style="width: 100%;" :src="codeimg"></image>
			</view>
			<view @click="codetypes=false" class="wcbd" style="background-color: red;color: aliceblue;">
				关闭
			</view>
		</view> -->
		
		<u-popup :show="codetypes" mode="center" @close="codetypes=false" :closeable="false">
			<view style="width: 400px;">
				<view class="qx" >
					<view class="qxtext">二维码</view>
				</view>
				<view style="height: 350px;width: 350px;margin: 0 auto;">
					<u--image  width="350" height="350" :src="codeimg" ></u--image>
					<!-- <image style="width: 100%;" :src="codeimg"></image> -->
				</view>
				<view @click="codetypes=false" class="wcbd" style="background-color: red;color: aliceblue;">
					关闭
				</view>
				
			</view>
		</u-popup>
		
		
		<view v-show="sjyuy2"
			class="ck">
			<view class="qx">
				<view class="qxtext">车牌查询</view>
			</view>
			<view class="navlist">
				<view class="navlistitem1" style="height: 60px;line-height: 60px;font-size: 20px;font-weight: 600;">车牌:</view>
				<view class="navlistitem2" style="overflow: hidden;">
					<view
						class="but1">
						<input style="font-size: 40upx;line-height: 60px;height: 60px;" type="text" v-model="cpnames" />
					</view>
					<view @click="seachcp"
						class="seach">查询
					</view>
				</view>
			</view>
				<view style="overflow: auto;height: 300px;margin-bottom: 20px;">
					<view class="listv" :class="{'itv':cur2==item.id,'itv2':item.blackname==2}" @click="xzcps(item)" v-for="(item, index) in items4" :key="item.id" >{{item.char1}}</view>
					
				</view>
			<view @click="qxxz()" class="wcbd">
				确认选择
			</view>
			<view @click="qxcp" class="wcbd" style="background-color: red;color: aliceblue;">
				关闭
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				udata: '',
				list: [],
				currentTab: 1,
				items4: [],
				current: '',
				sjyuy2: false,
				cp: '',
				cpid: '',
				ghcpid: '',
				cpnames: '',
				cur1: '',
				xzinfo: '',
				cur2:'',
				codeimg:'',
				codetypes:false
			}
		},
		created() {
			this.init()
		},
		// onShow() {
		// 	this.init()
		// },
		methods: {
			//查看二维码
			async getcode(){
				let xzinfo = this.xzinfo
				if(this.cur1==''){
					uni.showToast({
						title:'请选择后操作',
						icon: "none",
						duration: 2000
					});
					return false;
				}
				let data = {
					cp:xzinfo.cp
				}
				let res = await this.$api.getyuypcode(data)
				this.codeimg = res.data
				console.log(res.data)
				this.codetypes = true
				
			},
			addxz(e) {
				this.cur1 = e.id
				this.xzinfo = e
			},
			//选择车票
			xzcps(e){
				if(e.blackname==2){
					uni.showToast({
						title: '当前车牌是黑名单',
						icon: "none",
						duration: 2000
					});
					return false;
				}else{
					console.log(e)
					this.cur2 = e.id
					this.cp = e.char1
					this.cpid = e.id
				}
			},


			async seachcp() {
				let cpnames = this.cpnames
				let data = {
					cdid: this.udata.cdid,
					cpnames: cpnames
				}
				let res = await this.$api.getcpcdlist(data)
				if (res.data.code == 0) {
					this.items4 = res.data.data
				}
			},
			qxcp() {
				this.sjyuy2 = false
			},
			async qxxz(e) {
				if(this.cur1==''){
					uni.showToast({
						title:'请选择后操作',
						icon: "none",
						duration: 2000
					});
					return false;
				}
				
				let data = {
					id: this.cur1,
					cp: this.cp,
					cpid: this.cpid
				}
				let res = await this.$api.edititcpjilu(data)
				if (res.data.code == 0) {
					//log
					let data1 = {
						uid:uni.getStorageSync('uid'),
						msg:this.udata.cname+'更换车牌'+this.cp,
						lv:1,
						type:1,
						cz:JSON.stringify(this.xzinfo)
					}	
					await this.$api.addlogs(data1)
					
					
					this.init()
					this.sjyuy2 = false
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						duration: 2000
					});
				}

			},
			async getcpcdlist() {
				let data = {
					cdid: this.udata.cdid
				}
				let res = await this.$api.getcpcdlist(data)
				if (res.data.code == 0) {
					this.items4 = res.data.data
				}
			},
		
			currentTabs(e) {
				this.currentTab = e
				this.init()
			},
			//换车牌
			async editcp(e) {
				this.sjyuy2 = true
				this.ghcpid = this.cur1
			},

			async detailyuy(e) {
				uni.navigateTo({
					url: '/pages/detailyuy/detailyuy?id=' + e.id
				})
			},
			async getuserinfo() {
				let data = {
					id: uni.getStorageSync('uid')
				}
				let res = await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if (res.data.code == 0) {
					this.udata = res.data.data
					this.getcpcdlist();
				}
			},
			async init() {
				let data = {
					uid: uni.getStorageSync('uid'),
					currentTab: this.currentTab,
				}
				let res = await this.$api.getyuylist(data)
				this.getuserinfo()
				console.log(res.data.data)
				this.list = res.data.data
			},
			//取消任务司机
			qxrwsj() {
				let that = this
				uni.showModal({
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮文字 
					title: '删除提示',
					content: '是否取消当前任务?',
					confirmColor: '#3B8BFF',
					cancelColor: '#222222',
					success: res => {
						//that.delyuy(e);
						if (res.confirm) {
							that.delyuy();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
						console.log(res)
					}
				});
			},



			async delyuy(e) {
				if(this.xzinfo==''){
					uni.showToast({
						title: '请选择后在进行操作',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
		
					if(this.xzinfo.ygbstatus!=2 && this.xzinfo.status!=1){
						uni.showToast({
							title: '当前任务已经取消',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
				
		
				let data = {
					id: this.xzinfo.id,
					currentTab: this.currentTab
				}
				let res = await this.$api.delyuy(data)
				console.log(res.data.data)
				if (res.data.code == 0) {
					
					let data1 = {
						uid:uni.getStorageSync('uid'),
						msg:this.udata.cname+'取消了任务',
						lv:1,
						type:1,
						cz:JSON.stringify(this.xzinfo)
					}	
					await this.$api.addlogs(data1)
					
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
					this.init()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
			},

		}
	}
</script>

<style lang="scss">
	.page-appoint {
		font-size: 14px;
		box-sizing: border-box;
		background-color: #e6e6e6;
		min-height: 610px;
		margin-bottom: 100px;
		padding-bottom: 100px;
	}

	.fv {
		float: left;
		border: 3upx solid #007AFF;
		padding: 10upx;
		margin-left: 30upx;
	}

	.atvsv {
		width: 50%;
		float: left;
		// height: 100upx;
		color: #6d6d6d;
		font-size: 18px;
		background-color: #FFFFFF;
	}

	.atc {
		color: #FFFFFF;
		font-size: 15px;
		background-color: #3c77b7;
		height: 100upx;
	}

	.atv {
		width: 100%;
		height: 100upx;
		overflow: hidden;
	}

	.atvsv view {
		display: block;
		line-height: 80upx;
		text-align: center;
		height: 80upx;
		width: 100%;
		// border-radius: 10px;
	}

	.appoint-item {
		display: block;
		width: 96%;
		background-color: #ffffff;
		margin: 0 auto;
		// margin-top: 10px;
		// height: 390upx;
		font-size: 18px;
		border-radius: 5px;
		padding: 40upx;
		position: relative;
		margin-bottom: 10upx;
		margin-top: 5px;
		>view {
			font-size: 18px;
			margin-bottom: 20upx;
		}
	}

	.itevs1 {
		width: 48%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border: 1px solid #3c77b7;
		float: left;
		margin-left: 5px;
		border-radius: 10px;
		background-color: #3c77b7;
		font-size: 20px;
		font-weight: 600;
		margin-top: 5rpx;
	}

	.itvs {
		background-color: #3c77b7;
		color: #FFFFFF;
	}
	.ck{
		z-index: 999;
		-moz-opacity: 1;
		opacity: 1;
		border: 1px solid #3c77b7;
		position: fixed;
		background-color: #ffffff;
		width: 90%;
		border-radius: 5px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		//padding: 10upx;
	}
	.qx {
		background-color: #4993dd;
		overflow: hidden;
		color: #ffffff;
		font-size: 40upx;
		height: 40px;
		line-height: 40px;
	}
	.qxtext {
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
	}
	.wcbd {
		text-align: center;
		height: 70upx;
		line-height: 70upx;
		background-color: #3c77b7;
		font-size: 35upx;
		font-weight: 600;
		color: #ffffff;
	}
	.navlist {
		padding: 10px;
		// margin-bottom: 10px;
		overflow: hidden;
		height: 60px;
	}
	
	.navlistitem1 {
		float: left;
		font-size: 35upx;
		height: 30upx;
	
		// line-height: 30upx;
		font-weight: 600;
		color: #3c77b7;
	}
	
	.navlistitem2 {
		float: left;
		font-size: 35upx;
		height: 60px;
		margin-left: 20upx;
		// line-height: 30upx;
		// font-weight: 600;
		// color: #3c77b7;
	}
	.listv{
		height: 50px;
		width: 80%;
		border: 2px solid #4993dd;
		text-align: center;
		line-height: 50px;
		margin: 0 auto;
		margin-top: 8px;
		border-radius: 10px;
		font-size: 18px;
		color: #4993dd;
		// font-weight: 600;
	}
	.but1{
		float: left;
		margin-left: 20upx;
		height:50px;
		border-bottom: 3px solid #4993dd;
		font-weight: 600;
		width: 300upx;
		line-height: 50px;
		color: #4993dd;
	}
	.seach{
		float: left;
		height: 50px;
		width: 60px;
		color: #ffffff;
		border-radius: 10px;
		font-size: 20px;
		margin-left: 10px;
		line-height: 50px;
		text-align: center;
		background-color: #4993dd;
	}
	.itv{
		background-color: #4993dd;
		color: #ffffff;
	}
	.itv2{
		background-color: #000102;
		color: #ffffff;
	}
</style>
